<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Neon Admin Panel">
    <meta name="author" content="">

    <title>晓辰-地表水水质信息表</title>


    <link rel="stylesheet" th:href="@{/css/jquery-ui-1.10.3.custom.min.css}">
    <link rel="stylesheet" th:href="@{/css/entypo.css}">
    <link rel="stylesheet" th:href="@{/css/css.css}">
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}">
    <link rel="stylesheet" th:href="@{/css/neon-core.css}">
    <link rel="stylesheet" th:href="@{/css/neon-theme.css}">
    <link rel="stylesheet" th:href="@{/css/neon-forms.css}">
    <link rel="stylesheet" th:href="@{/css/custom.css}">

    <script th:src="@{/js/jquery-1.11.0.min.js}"></script>

    <!--[if lt IE 9]><script src="assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <style type="text/css">
        /*设置分页的下框*/
        /*#pagination {*/
        /*    display: flex;*/
        /*    justify-content: center; !* 将子元素居中对齐 *!*/
        /*    margin-top: 20px; !* 可选：添加上下间距 *!*/
        /*    !*border: 6px solid #ccc;*!*/
        /*}*/
        /* 分页按钮布局 */
        #pagination {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }

        /* 分页按钮样式 */
        .page-button {
            border: none;
            padding: 5px 12px;
            margin: 0 3px;
            font-size: 16px;
            color: #555;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
            cursor: pointer;
        }

        /* 当前页码按钮样式 */
        .page-button.active {
            background-color: #007aff;
            color: #fff;
        }
        /*地表水水质监测*/
        .RealTimeMonitoring .monitor{
            font-size: 20px;
            line-height: 25px;
            font-weight: bold;
        }
        body{
            margin: 0px auto;
            width:1550px;
            min-width:1024px;
            max-width:100%;
            height:100%;
            background-color:white;
        }

        /*自定义css*/
        .table th, .table td {
            text-align: center;
            vertical-align: middle!important;
        }
        .table td{
            font-size: 15px;
        }
        .table th{
            font-size: 20px;
        }
    </style>
</head>

<body class="page-body page-fade  fdfdxddfgfjj" data-url="http://neon.dev">
<body class="page-body  page-fade" data-url="http://neon.dev">

<div class="page-container"><!-- add class "sidebar-collapsed" to close sidebar by default, "chat-visible" to make chat appear always -->

    <!--调用可复用代码：侧边栏-->
    <div th:insert="~{commons/common::sidebar(active='waterQuality.html')}"></div>
    <div class="main-content">
        <!--调用可复用代码：头部栏-->
        <div th:insert="~{commons/common::topbar}"></div>

        <hr>


        <!--地表水水质-->
            <div class="tile-stats tile-white" style="padding:1%;">
                <div class="row">
                    <div class="col-md-12">
                        <div class="RealTimeMonitoring">

                            <div class="alert alert-info" role="alert" id="han">
                                <p class="monitor">地表水水质信息</p>
                            </div>

                            <table class="table table-bordered " id="water-quality-table">
                                <thead>
                                <tr class="table-tr">
                                    <th>站点情况</th>
                                    <th>监测断面位点</th>
                                    <th class="mid">排污编码</th>
                                    <th>水温(℃)</th>
                                    <th>浊度(NTU)</th>
<!--                                    <th>叶绿素</th>-->
                                    <th>流域河流</th>
                                    <th>省市</th>
                                    <th>溶解氧(mg/L)</th>
                                    <th>监测时间</th>
                                    <th>总磷(mg/L)</th>
<!--                                    <th>藻密度</th>-->
                                    <th>电导率(μS/cm)</th>
                                    <th>总氮(mg/L)</th>
                                    <th>PH值</th>
                                    <th>氨氮(mg/L)</th>
                                    <th>水质类别</th>
                                    <th>高锰酸盐指数(mg/L)</th>

<!--                                    <th>操作</th>-->

                                </tr>
                                </thead>
                                <tbody id="table-body">
                                </tbody>
                            </table>
                            <!-- pagination wrapper -->
                            <div id="pagination"></div>

                        </div>
                    </div>
                </div>
            </div>
<!--        // 在页面底部添加新增数据行的模态框-->
<!--        <div class="modal fade" id="add-row-modal" tabindex="-1" role="dialog" aria-labelledby="add-row-modal-label" aria-hidden="true">-->
<!--            <div class="modal-dialog" role="document">-->
<!--                <div class="modal-content">-->
<!--                    <div class="modal-header">-->
<!--                        <h5 class="modal-title" id="add-row-modal-label">增加新记录</h5>-->
<!--                        <button type="button" class="close" data-dismiss="modal" aria-label="关闭">-->
<!--                            <span aria-hidden="true">&times;</span>-->
<!--                        </button>-->
<!--                    </div>-->
<!--                    <div class="modal-body">-->
<!--                        <form id="add-row-form">-->
<!--                            &lt;!&ndash; 在这里添加表单控件，用于输入新行数据 &ndash;&gt;-->
<!--                            <div class="form-group">-->
<!--                                <label for="Mid">监测断面位点</label>-->
<!--                                <input type="text" class="form-control" id="Mid" name="Mid">-->
<!--                            </div>-->
<!--                            <div class="form-group">-->
<!--                                <label for="Water_Temperature">水温(℃)</label>-->
<!--                                <input type="text" class="form-control" id="Water_Temperature" name="Water_Temperature">-->
<!--                            </div>-->
<!--                            <div class="form-group">-->
<!--                                <label for="Turbidity">浊度(NTU)</label>-->
<!--                                <input type="text" class="form-control" id="Turbidity" name="Turbidity">-->
<!--                            </div>-->
<!--                            <div class="form-group">-->
<!--                                <label for="Watershed_River">流域河流</label>-->
<!--                                <input type="text" class="form-control" id="Watershed_River" name="Watershed_River">-->
<!--                            </div>-->
<!--                            <div class="form-group">-->
<!--                                <label for="Province">省市</label>-->
<!--                                <input type="text" class="form-control" id="Province" name="Province">-->
<!--                            </div>-->
<!--                            <div class="form-group">-->
<!--                                <label for="Dissolved_Oxygen">溶解氧(mg/L)</label>-->
<!--                                <input type="text" class="form-control" id="Dissolved_Oxygen" name="Dissolved_Oxygen">-->
<!--                            </div>-->
<!--                            &lt;!&ndash; 其他字段... &ndash;&gt;-->
<!--                        </form>-->
<!--                    </div>-->
<!--                    <div class="modal-footer">-->
<!--                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>-->
<!--                        <button type="button" class="btn btn-primary" id="submit-row-button">保存</button>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->



            <link rel="stylesheet" type="text/css" href="slick.css">
            <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>


            <script type="text/javascript">


                $.getJSON("http://localhost:8086/sewage/getAllWaterInfo", function (data) {
                    var waterQualityData = data.data;

                    // 清空表格内容
                    $('#table-body').empty();

                    // 分页参数
                    var pageSize = 6; // 每页显示6条数据
                    var currentPage = 1; // 当前页数，默认为第一页

                    // 总页数
                    var pageCount = Math.ceil(waterQualityData.length / pageSize);

                    // 显示当前页的数据
                    showData();

                    // 创建分页按钮
                    for(var i = 1; i <= pageCount; i++) {
                        var button = $('<button>').attr('class', 'page-button').text(i).on('click', function(){
                            // 点击分页按钮，设置当前页码并重新渲染数据
                            currentPage = parseInt($(this).text());
                            showData();
                        });
                        $('#pagination').append(button);
                    }

                    // 展示对应页数的数据到表格中
                    function showData() {
                        $('#table-body').empty();


                        // 计算当前页需要展示的数据范围并渲染到表格中
                        var startIndex = (currentPage - 1) * pageSize;
                        var endIndex = Math.min(startIndex + pageSize, waterQualityData.length);
                        for(var i = startIndex; i < endIndex; i++) {
                            var item = waterQualityData[i];

                            //数据存放
                            var idHtml = '<td>' + item['Mid'] + '</td>';
                            var temperatureHtml = '<td>' + item['Water_Temperature'] + '</td>';
                            var TurbidityHtml = '<td>' + item['Turbidity'] + '</td>';
                            //4：Chlorophyll_Alpha
                            var Watershed_RiverHtml = '<td>' + item['Watershed_River'] + '</td>';
                            var Province_CityHtml = '<td>' + item['Province_City'] + '</td>';
                            var Dissolved_OxygenHtml = '<td>' + item['Dissolved_Oxygen'] + '</td>';
                            var timeHtml = '<td>' + item['Monitoring_Time'] + '</td>';
                            var Total_PhosphorusHtml = '<td>' + item['Total_Phosphorus'] + '</td>';
                            //10：Algal_Density
                            var conductivityHtml = '<td>' + item['Conductivity'] + '</td>';
                            var Total_NitrogenHtml = '<td>' + item['Total_Nitrogen'] + '</td>';
                            var PHHtml = '<td>' + item['PH'] + '</td>';
                            var pointHtml = '<td>' + item['Section_Point'] + '</td>';
                            var Ammonia_NitrogenHtml = '<td>' + item['Ammonia_Nitrogen'] + '</td>';
                            var Water_Quality_TypeHtml = '<td>' + item['Water_Quality_Type'] + '</td>';
                            var Permanganate_IndexHtml = '<td>' + item['Permanganate_Index'] + '</td>';
                            var statusHtml = '<td><span class="glyphicon ' + (item['Site_Condition'] === '正常' ? 'glyphicon-ok' : 'glyphicon-remove') + ' aria-hidden="true"></span></td>';

                            // //添加删除按钮
                            // var addButtonHtml = '<td><button type="button" class="add-button btn btn-primary">添加</button></td>';
                            // var deleteButtonHtml = '<td><button type="button" class="delete-button btn btn-danger">删除</button></td>';
                            //
                            // var addDelHtml =  '<td>'+addButtonHtml + deleteButtonHtml + ''</td>';

                            // // 添加“添加”按钮和“删除”按钮列的 HTML 代码
                            // var addDelHtml = '<td class="add-del-td">' +
                            //     '<div class="add-del-buttons">' +
                            //     '<button type="button" class="add-button btn btn-primary">添加</button>' +
                            //     '<button type="button" class="delete-button btn btn-danger">删除</button>' +
                            //     '</div>' +
                            //     '</td>';

                            // var row = $('<tr>').append(statusHtml, pointHtml, idHtml, temperatureHtml, TurbidityHtml, Watershed_RiverHtml,
                            //     Province_CityHtml, Dissolved_OxygenHtml, timeHtml, Total_PhosphorusHtml, conductivityHtml,
                            //     Total_NitrogenHtml, PHHtml, Ammonia_NitrogenHtml, Water_Quality_TypeHtml, Permanganate_IndexHtml,addDelHtml);


                            var row = $('<tr>').append(statusHtml, pointHtml, idHtml, temperatureHtml, TurbidityHtml, Watershed_RiverHtml,
                                Province_CityHtml, Dissolved_OxygenHtml, timeHtml, Total_PhosphorusHtml, conductivityHtml,
                                Total_NitrogenHtml, PHHtml, Ammonia_NitrogenHtml, Water_Quality_TypeHtml, Permanganate_IndexHtml);
                            $('#table-body').append(row);
                        }
                    }

                //响应删除的按钮
                $(document).on('click', '.delete-button', function(){
                    var row = $(this).closest('tr'); // 获取该行数据
                    var id = row.find('.mid').text(); // 获取该行数据的ID

                    $.ajax({
                        type: "POST",
                        url: "http://localhost:8086/sewage/deleteWaterInfo",
                        dataType: "json",
                        data: {
                            "id": id
                        },
                        success: function (data) {
                            // 从表格中删除该行数据
                            row.remove();
                        },
                        error: function(xhr, status, error) {
                            console.log(error);
                        }
                    });
                });

                // // 给“增加”按钮注册单击事件处理程序
                    // 响应添加按钮
                    $(document).on('click', '.add-button', function() {
                        // 获取新记录的各个输入框值
                        var status = $('#status-input').val();
                        var point = $('#point-input').val();
                        var temperature = $('#temperature-input').val();
                        var turbidity = $('#turbidity-input').val();
                        var watershed_river = $('#watershed_river-input').val();
                        var province_city = $('#province_city-input').val();
                        var dissolved_oxygen = $('#dissolved_oxygen-input').val();
                        var time = $('#time-input').val();
                        var total_phosphorus = $('#total_phosphorus-input').val();
                        var conductivity = $('#conductivity-input').val();
                        var total_nitrogen = $('#total_nitrogen-input').val();
                        var ph = $('#ph-input').val();
                        var ammonia_nitrogen = $('#ammonia_nitrogen-input').val();
                        var water_quality_type = $('#water_quality_type-input').val();
                        var permanganate_index = $('#permanganate_index-input').val();

                        $.ajax({
                            type: "POST",
                            url: "http://localhost:8086/sewage/addWaterInfo",
                            dataType: "json",
                            data: {
                                "status": status,
                                "point": point,
                                "temperature": temperature,
                                "turbidity": turbidity,
                                "watershed_river": watershed_river,
                                "province_city": province_city,
                                "dissolved_oxygen": dissolved_oxygen,
                                "time": time,
                                "total_phosphorus": total_phosphorus,
                                "conductivity": conductivity,
                                "total_nitrogen": total_nitrogen,
                                "ph": ph,
                                "ammonia_nitrogen": ammonia_nitrogen,
                                "water_quality_type": water_quality_type,
                                "permanganate_index": permanganate_index
                            },
                            success: function (data) {
                                // 在表格中插入新的记录行
                                var newRow = $('<tr>').append(
                                    $('<td>').text(status),
                                    $('<td>').text(point),
                                    $('<td class="mid">').text(data.id),  // data.id 是返回的新记录的 ID
                                    $('<td>').text(temperature),
                                    $('<td>').text(turbidity),
                                    $('<td>').text(watershed_river),
                                    $('<td>').text(province_city),
                                    $('<td>').text(dissolved_oxygen),
                                    $('<td>').text(time),
                                    $('<td>').text(total_phosphorus),
                                    $('<td>').text(conductivity),
                                    $('<td>').text(total_nitrogen),
                                    $('<td>').text(ph),
                                    $('<td>').text(ammonia_nitrogen),
                                    $('<td>').text(water_quality_type),
                                    $('<td>').text(permanganate_index),
                                    $('<td>').append($('<div class="add-del-buttons">').append(
                                        $('<button type="button" class="add-button btn btn-primary">添加</button>'),
                                        $('<button type="button" class="delete-button btn btn-danger">删除</button>')
                                    ))
                                );
                                $('#table-body').append(newRow);

                                // 清空输入框内容
                                $('#status-input').val('');
                                $('#point-input').val('');
                                $('#temperature-input').val('');
                                $('#turbidity-input').val('');
                                $('#watershed_river-input').val('');
                                $('#province_city-input').val('');
                                $('#dissolved_oxygen-input').val('');
                                $('#time-input').val('');
                                $('#total_phosphorus-input').val('');
                                $('#conductivity-input').val('');
                                $('#total_nitrogen-input').val('');
                                $('#ph-input').val('');
                                $('#ammonia_nitrogen-input').val('');
                                $('#water_quality_type-input').val('');
                                $('#permanganate_index-input').val('');
                            },
                            error: function(xhr, status, error) {
                                console.log(error);
                            }
                        });
                    });





// 注册“保存”按钮的单击事件处理程序
                    $('#submit-row-button').click(function () {
                        var rowData = {
                            "Mid": $('#Mid').val(),
                            "Water_Temperature": $('#Water_Temperature').val(),
                            "Turbidity": $('#Turbidity').val(),
                            "Watershed_River": $('#Watershed_River').val(),
                            "Province": $('#Province').val(),
                            "Dissolved_Oxygen": $('#Dissolved_Oxygen').val(),
                            // 其他字段
                        };
                        $.ajax({
                            type: "POST",
                            url: "http://localhost:8086/sewage/addRow",
                            contentType: "application/json",
                            data: JSON.stringify(rowData),
                            success: function (data) {
                                // 关闭模态框，重新加载数据

                            }
                            });
                            });
                });
            </script>

<!--        </div>-->


        <!--底部翻页栏-->
<!--        <div th:fragment="page">-->
<!--            <nav aria-label="Page navigation" style="text-align: center">-->
<!--                <ul class="pagination">-->
<!--                    <li>-->
<!--                        <a th:href="@{/sewage/waterpage/1}" aria-label="Previous">-->
<!--                            <span aria-hidden="true">&laquo;</span>-->
<!--                        </a>-->
<!--                    </li>-->
<!--                    &lt;!&ndash;<li th:class="${active=='index.html'|| active=='report.html'?'active opened active':''}">&ndash;&gt;-->
<!--                    <li th:class="${startPage==1?'active':''}"><a th:href="@{/sewage/waterpage/1}">1</a></li>-->
<!--                    <li th:class="${startPage==2?'active':''}"><a th:href="@{/sewage/waterpage/2}">2</a></li>-->
<!--                    <li th:class="${startPage==3?'active':''}"><a th:href="@{/sewage/waterpage/3}">3</a></li>-->
<!--                    <li th:class="${startPage==4?'active':''}"><a th:href="@{/sewage/waterpage/4}">4</a></li>-->
<!--                    <li th:class="${startPage==5?'active':''}"><a th:href="@{/sewage/waterpage/5}">5</a></li>-->
<!--                    <li>-->
<!--                        <a th:href="@{/sewage/page/5}" aria-label="Next">-->
<!--                            <span aria-hidden="true">&raquo;</span>-->
<!--                        </a>-->
<!--                    </li>-->
<!--                </ul>-->
<!--            </nav>-->
<!--        </div>-->
        <!-- Footer -->
        <footer class="main">

        </footer>
    </div>


    <!--聊天框-->
    <div th:insert="~{commons/common::rightbar}"></div>
</div>


<script th:src="@{/js/main-gsap.js}"></script>
<script th:src="@{/js/jquery-ui-1.10.3.minimal.min.js}"></script>
<script th:src="@{/js/bootstrap.js}"></script>
<script th:src="@{/js/joinable.js}"></script>
<script th:src="@{/js/resizeable.js}"></script>
<script th:src="@{/js/neon-api.js}"></script>
<script th:src="@{/js/neon-chat.js}"></script>
<script th:src="@{/js/neon-custom.js}"></script>
<script th:src="@{/js/neon-demo.js}"></script>

</body>
</html>